<template>
  <div class="content_main flex flex-column height">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
    ></header-top>
    <div class="content">
      <div class="content_top">
        <div class="content_title">
          <div class="title_up">广慈-太保互联网医院</div>
          <div class="title_down">“2020全国智慧医院建设优秀案例”授牌</div>
        </div>
        <div class="title_image"><img src="./image/icon_top.png" /></div>
      </div>
      <div class="content_introduction">
        <div class="introduction_title">
          医院介绍<img src="./image/icon_introduction.png" />
        </div>
        <div class="introduction_content">
          <div class="in_content">
            <span
              >1992年12月21日，上海第二医科大学附属瑞金医院与通通（香港）有限公司共同设立上海广慈医院，由瑞金医院全权管理。作为国内首批中外合作医疗机构，充分发挥瑞金医院的技术和管理优势，为中外患者提供高品质的医疗服务和健康保健。2004年7月医院更名为上海广慈纪念医院。2012年9月，因政策原因，医院另择址暂时歇业。
            </span>
            <p>
              2019年1月，作为首批项目落地广慈-思南医学健康创新园区。2019年5月，医院一期门诊重新开业。依托瑞金医院品牌、技术和管理优势，引入国内外知名医疗专家，为有需求的人士提供个性化、高品质、全方位的医疗服务与健康管理。
            </p>
          </div>
        </div>
      </div>
      <div class="content_foot">
        <div class="introduction_title">
          医疗资源<img src="./image/icon_introduction.png" />
        </div>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <div class="swiper">
              <div>
                <span>张志远</span> 内科
                <P>上海第八人民医院主任</P>
              </div>
              <div class="swiper_back">
                <img src="./image/icon_sg.png" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper">
              <div>
                <span>张志远</span> 内科
                <P>上海第八人民医院主任</P>
              </div>
              <div class="swiper_back">
                <img src="./image/icon_sg.png" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper">
              <div>
                <span>张志远</span> 内科
                <P>上海第八人民医院主任</P>
              </div>
              <div class="swiper_back">
                <img src="./image/icon_sg.png" />
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="content_features">
        <div class="introduction_title">
          服务特色<img src="./image/icon_introduction.png" />
        </div>
        <div class="features_list">
          <div class="features_content">
            <div class="list_image">
              <div class="list_sg"><img src="./image/icon_sg.png" /></div>
            </div>
            <div class="list_content">
              <span>名医专家团队</span>
              <P
                >以瑞金医院强大的专家团队为核心骨干，为病患提供更便捷有效的一站式服务。</P
              >
            </div>
          </div>
        </div>
        <div class="features_list">
          <div class="features_content">
            <div class="list_content1">
              <span>高精尖技术优势</span>
              <P
                >凝聚瑞金强大的医学研究和临床转化能力，提供先进的诊断技术及治疗手段。</P
              >
            </div>
            <div class="list_image">
              <div class="list_sg1"><img src="./image/icon_sg.png" /></div>
            </div>
          </div>
        </div>
        <div class="features_list">
          <div class="features_content">
            <div class="list_image">
              <div class="list_sg"><img src="./image/icon_sg.png" /></div>
            </div>
            <div class="list_content">
              <span>健康疾病全程管理</span>
              <P
                >综合多学科高质素医疗团队，遵循全周期健康管理理念，全方位个性化健康定制服务。</P
              >
            </div>
          </div>
        </div>
      </div>
      <div class="cont_foot">
        <div class="introduction_title">
          医院荣誉<img src="./image/icon_introduction.png" />
        </div>
        <div class="icon_foot">
          <img src="./image/icon_foot.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
export default {
  name: "introduction",
  components: {
    HeaderTop
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        background: "none", //头部背景颜色
        color: "#fff", //头部中间文字颜色
        title: "医院介绍",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#fff"
        }
      },
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 1,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.content {
  height: calc(100% - 0.5rem);
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
.content_main >>> .swiper-slide .swiper-slide-active {
  width: 140px;
}
.swiper-container {
  width: 100%;
  height: 2rem;
  overflow: visible;
}
.swiper-slide {
  text-align: center;
  border-radius: 0.07rem;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-shadow: 4px 4px 0 #e9faf9;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.88);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>
<style lang="less" scoped>
.content_main {
  height: 100%;
  background: #fff url("./image/icon_bj.png") no-repeat top;
  background-size: 100%;
  overflow-x: hidden;
  .content_top {
    background: #fff url("./image/icon_bj.png") no-repeat top;
    background-size: 100%;
    margin-bottom: 0.36rem;
    .content_title {
      .title_back {
        padding-top: 0.18rem;
        padding-left: 0.25rem;
        display: inline-block;
        img {
          width: 0.1rem;
          background-size: 100%;
        }
      }
      .title_up {
        padding-bottom: 0.14rem;
        font-size: 0.26rem;
        text-align: center;
        color: #fff;
      }
      .title_down {
        font-size: 0.12rem;
        color: #fff;
        text-align: center;
        padding-bottom: 0.14rem;
      }
    }
    .title_image {
      img {
        width: 3.3rem;
        padding: 0 0.23rem;
        background-size: 100%;
        overflow: hidden;
      }
    }
  }
  .content_introduction {
    .introduction_title {
      font-size: 0.18rem;
      color: #5a5a5a;
      padding-left: 0.3rem;
      margin-bottom: 0.07rem;
      img {
        width: 0.18rem;
        margin-left: 0.07rem;
      }
    }
    .introduction_content {
      width: 3.5rem;
      background-color: #fff;
      margin: 0 auto;
      margin-bottom: 0.46rem;
      box-shadow: 0px 2px 4px #dcfffe;
      .in_content {
        padding: 0.22rem;
        color: #333;
        font-size: 0.12rem;
        p {
          padding-top: 0.2rem;
        }
      }
    }
  }
  .content_features {
    margin-bottom: 0.46rem;
    .introduction_title {
      font-size: 0.18rem;
      color: #5a5a5a;
      padding-left: 0.3rem;
      margin-bottom: 0.16rem;
      img {
        width: 0.18rem;
        margin-left: 0.07rem;
      }
    }
    .features_list {
      width: 3.27rem;
      margin: 0 auto;
      background: #fff;
      margin-bottom: 0.22rem;
      box-shadow: 0px 2px 4px #dcfffe;
      .features_content {
        padding: 0.15rem 0.25rem;
        display: flex;
        justify-content: space-between;
        .list_image {
          .list_sg {
            box-shadow: 6px 6px 1px #d9f6f7;
            border-radius: 10px;
            img {
              width: 0.76rem;
              border-radius: 0.1rem;
              background-size: 100%;
            }
          }
          .list_sg1 {
            box-shadow: 6px 6px 1px #ffe2e7;
            border-radius: 10px;
            img {
              width: 0.76rem;
              border-radius: 0.1rem;
              background-size: 100%;
            }
          }
        }
        .list_content {
          padding-left: 0.21rem;
          span {
            font-size: 0.16rem;
            color: #333;
          }
          p {
            width: 1.77rem;
            padding-top: 0.07rem;
            font-size: 0.12rem;
            color: #333;
          }
        }
        .list_content1 {
          span {
            font-size: 0.16rem;
            color: #333;
          }
          p {
            width: 1.77rem;
            padding-top: 0.07rem;
            font-size: 0.12rem;
            color: #333;
          }
        }
      }
    }
  }
  .content_foot {
    margin-bottom: 0.4rem;
    .introduction_title {
      font-size: 0.18rem;
      color: #5a5a5a;
      padding-left: 0.3rem;
      margin-bottom: 0.21rem;
      img {
        width: 0.18rem;
        margin-left: 0.07rem;
      }
    }
    .swiper {
      color: #333;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      div {
        padding: 0 0.16rem;
        padding-top: 0.1rem;
        box-sizing: border-box;
        span {
          font-size: 0.13rem;
        }
        p {
          font-size: 0.11rem;
          padding-top: 0.05rem;
          margin-bottom: 0.25rem;
        }
      }
      .swiper_back {
        width: 1.12rem;
        margin: 0 0.14rem;
        display: flex;
        justify-content: center;
        background: url("./image/icon_ty.png") no-repeat left bottom;
        background-size: 100%;
        img {
          display: block;
          height: 1.08rem;
        }
      }
    }
  }
  .cont_foot {
    .introduction_title {
      font-size: 0.18rem;
      color: #5a5a5a;
      padding-left: 0.3rem;
      margin-bottom: 0.45rem;
      img {
        width: 0.18rem;
        margin-left: 0.07rem;
      }
    }
    .icon_foot {
      img {
        width: 100%;
      }
    }
  }
}
</style>
